<div class="da-list-wrap">
    <div class="da-content-wrapper">
      <d-row [dGutter]="[12, 12]">
        <d-col [dSpan]="24">
          <div class="da-list-container">
            <div class="da-list-header">
              <div class="da-header-left">
                <d-row [dSpace]="15" [dAlign]="'center'" [dSpaceDirection]="'horizontal'">
                  <d-col>
                    <div class="da-header-item-label">{{ 'job.artifact.name' | translate }}:</div>
                  </d-col>
                  <d-col>
                    <input dTextInput name="name" [(ngModel)]="searchFormConfig.name" (keyup.enter)="refreshTable()" />
                  </d-col>
                </d-row>
              </div>
              <div class="header-right">
                <d-button style="margin-right: 8px" bsStyle="primary" (btnClick)="refreshTable()">{{
                  'app.common.operate.query.label' | translate
                }}</d-button>
                <d-button bsStyle="common" (btnClick)="reset()">{{ 'app.common.operate.reset.label' | translate }}</d-button>
              </div>
            </div>
          </div>
        </d-col>
      </d-row>

      <d-row [dGutter]="[12, 12]">
        <d-col [dSpan]="24">
          <div class="da-list-container">
            <div class="da-list-header">
              <div class="header-left"></div>
              <div class="header-right">
                <d-button-group>
                  <d-button
                    *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevProjectAdd)"
                    bsStyle="primary"
                    (btnClick)="openUploadArtifactDialog()"
                    >{{ 'flink.release.upload' | translate }}</d-button>
                  <d-button
                    *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevProjectDelete)"
                    bsStyle="common"
                    (btnClick)="openDeleteArtifactDialog(dataTable.getCheckedRows())"
                    [disabled]="!dataTableChecked"
                    >{{ 'app.common.operate.delete.label' | translate }}</d-button>
                </d-button-group>
              </div>
            </div>
            <div class="list-content" id="dataTableContent">
              <d-data-table
                #dataTable
                [dataSource]="dataTableDs"
                [resizeable]="true"
                [checkable]="true"
                [tableLayout]="'fixed'"
                [scrollable]="true"
                [fixHeader]="true"
                (rowCheckChange)="getDataTableCheckedStatus()"
                (checkAllChange)="getDataTableCheckedStatus()"

              >
                <d-column field="name" header="{{ 'job.artifact.name' | translate }}">
                  <d-cell>
                    <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                  </d-cell>
                </d-column>
                <d-column field="path" header="{{ 'job.artifact.path' | translate }}">
                    <d-cell>
                      <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                    </d-cell>
                  </d-column>
                <d-column field="remark" header="{{ 'job.remark' | translate }}">
                  <d-cell>
                    <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                  </d-cell>
                </d-column>
                <d-column field="createTime" header="{{ 'job.createTime' | translate }}">
                  <d-cell>
                    <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                  </d-cell>
                </d-column>
                <d-column field="updateTime" header="{{ 'job.updateTime' | translate }}">
                  <d-cell>
                    <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                  </d-cell>
                </d-column>
                <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}">
                  <d-cell>
                    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                      <div class="btn-group over-flow-ellipsis">
                        <d-button
                          *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevProjectEdit)"
                          icon="icon-download"
                          bsStyle="text-dark"
                          (btnClick)="downloadArtifact(rowItem)"
                          title="{{ 'app.common.operate.download.label' | translate }}"
                        ></d-button>
                        <d-button
                          *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevProjectDelete)"
                          icon="icon-delete"
                          bsStyle="text-dark"
                          (btnClick)="openDeleteArtifactDialog([rowItem])"
                          title="{{ 'app.common.operate.delete.label' | translate }}"
                        ></d-button>
                      </div>
                    </ng-template>
                  </d-cell>
                </d-column>
                <ng-template #noResultTemplateRef>
                  <div style="text-align: center; margin-top: 20px">{{ 'app.common.noRecord' | translate }}</div>
                </ng-template>
              </d-data-table>
            </div>
            <div class="da-list-footer">
              <div class="footer-left"></div>
              <div class="footer-right">
                <d-pagination
                  size=""
                  [total]="pager.total"
                  [(pageSize)]="pager.pageSize"
                  [(pageIndex)]="pager.pageIndex"
                  [canViewTotal]="true"
                  [canChangePageSize]="true"
                  [canJumpPage]="true"
                  [maxItems]="5"
                  (pageIndexChange)="refreshTable()"
                  (pageSizeChange)="refreshTable()"
                >
                </d-pagination>
              </div>
            </div>
          </div>
        </d-col>
      </d-row>
    </div>
  </div>
